<template>
    <view class="page">
        <view class="page-form-list">
            <view class="page-form-certificate">
                <view class="certificate-head">
                    <view class="title">营业执照</view>
                </view>
                <view class="certificate-content" @click="businessLicenseUpload">
                    <img v-if="img_info.url!=''" :src="img_info.url" mode="widthFix" />
                    <view class="btn" v-if="img_info.url==''">
                        <img :src="File_Url+'add-a.png'" />
                        <text>上传营业执照副本</text>
                    </view>

                </view>
            </view>
            <view class="page-form-item">
                <text>真实姓名</text>
                <input type="text" placeholder="请输入真实名称" v-model="realname"/>
            </view>
            <view class="page-form-item">
                <text>单位名称</text>
                <input type="text" placeholder="请输入单位名称" v-model="unit_name"/>
            </view>
            <view class="page-form-place">
                <view class="form-place-top">
                    <text>单位所在地区</text>
                    <picker class="item-picker" mode="region" :value="region" :custom-item="customItem" @change="regionChange">
                        <!--                        <text>{{region[0]}},{{region[1]}},{{region[2]}}</text>-->
                        <text>{{region[2]=='全部'?(region[1]=='全部'?region[0]:region[1]):region[2]}}</text>
                        <img :src="File_Url+'right-grey.png'" />
                    </picker>
                </view>
                <view class="form-palce-bottom">
                    <input type="text" placeholder="请输入详细地址" v-model="address"/>
                </view>
            </view>
            <view class="page-form-item">
                <text>统一社会信用代码</text>
                <input type="text" placeholder="请输入" v-model="uniform_code" />
            </view>
        </view>
        <view class="page-btn">
            <button @click="submitUnitAuth">提交认证申请</button>
        </view>
    </view>
</template>

<script>
    let Provinces = require('../../../utils/provinces');
    export default {
        name: "companyAuth",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                region: [],
                customItem: '全部',
                img_info:{
                    url: '',
                    id: ''
                },
                unit_name:'',
                uniform_code:'',
                address:'',
                realname:''
            }
        },
        methods:{
			async getUnitAuthInfo(){
				let res =await this.$api.getUnitAuthInfo({user_token:uni.getStorageSync('userToken')});
				if(res.data.level=='success'){
					if(res.data.data){
						let data=res.data.data
						this.img_info={
							url:data.license_img_url,
							id:data.license_img_id
						}
						this.realname=data.realname;
						this.unit_name=data.name;
						this.region[1] = data.city;
						this.region[2] = data.area;
						this.region[0] = data.province;
						this.address = data.address;
						this.uniform_code = data.uniform_social_credit_code;
					}
				}
			},
            //上传营业执照
            async businessLicenseUpload(){
                let res=await this.$currency.upLoadImage(this,'file/businessLicenseUpload')
                let data=JSON.parse(res.data)
                if(data.level!='success'){
                    uni.showToast({
                        title:data.message,
                        icon:'none'
                    })
                }else {
                    this.img_info={
                        url:data.data.img_url,
                        id:data.data.id
                    }
                    this.getBusinessLicenseInfo();

                }
            },
            //获取营业执照信息
            async getBusinessLicenseInfo(){
                let params = {
                    img_id : this.img_info.id
                }
                const res = await this.$api.getBusinessLicenseInfo(params);
                if (res.data.level == 'success'){
                    this.region[1] = res.data.unit_address.city;
                    this.region[2] = res.data.unit_address.area;
                    this.getProvinces(res.data.unit_address.city);
                    this.address = res.data.unit_address.address;
                    this.unit_name = res.data.data.a;
                    this.uniform_code = res.data.data.b;
                }
            },
            //单位认证申请
            async submitUnitAuth(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    unit_name: this.unit_name,
                    uniform_social_credit_code: this.uniform_code,
                    province: this.region[0],
                    city: this.region[1],
                    area: this.region[2],
                    address: this.address,
                    license_img_id: this.img_info.id,
                    realname: this.realname
                }
                const res = await this.$api.submitUnitAuth(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon: 'success',
                        title: res.data.message,
                        duration: 1500
                    })
                    setTimeout(function () {
                        uni.navigateBack({
                            delta: 1
                        })
                    },1500)
                }else {
                    uni.showToast({
                        icon: 'none',
                        title: res.data.message,
                        duration: 1500
                    })
                }
            },
            //通过市获取省
            getProvinces(city){
                Provinces.forEach((item,index) => {
                    item.city.forEach((itt, idx) => {
                        if (itt.name == city) {
                            let str = this.region;
                            str[0] = item.name;
                            this.region = [];
                            this.region = str;
                        }
                    })
                })
            },
            regionChange(e){
                console.log(e)
                this.region = e.detail.value;
            },
        },
		onLoad() {
			this.getUnitAuthInfo()
		}
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        min-height: 100vh;
        @include flex(flex-start);
        flex-direction: column;
    }
    .page-form-list{
        background: #FFFFFF;
        width: 100vw;
        .page-form-head{
            border-bottom: 1rpx solid #E5E5E5;
            @include flex();
            flex-direction: column;
            padding: 30rpx 0;
            img{
                width: 184rpx;
                height: 184rpx;
                border-radius: 360rpx;
            }
        }
        .page-form-item{
            padding: 38rpx 30rpx;
            width: calc(100% - 60rpx);
            border-bottom: 1rpx solid #E5E5E5;
            @include flex(flex-start);
            flex-direction: row;
            text{
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
            }
            input{
                margin-left: auto;
                height: 45rpx;
                line-height: 45rpx;
                max-width: 70%;
                text-align: right;
            }
        }
        .page-form-place{
            padding: 38rpx 30rpx;
            border-bottom: 1rpx solid #E5E5E5;
            width: calc(100% - 60rpx);
            .form-place-top{
                @include flex(flex-start);
                flex-direction: row;
                padding-bottom: 24rpx;
                text{
                    height: 45rpx;
                    line-height: 45rpx;
                    font-size: 32rpx;
                }
                .item-picker{
                    margin-left: auto;
                    @include flex(flex-end);
                    flex-direction: row;
                    text{
                        font-size: 32rpx;
                        line-height: 45rpx;
                        height: 45rpx;
                        color: #999999;
                    }
                    img{
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
            }
            .form-palce-bottom{
                input{
                    width: 100%;
                    height: 45rpx;
                    line-height: 45rpx;
                }
            }
        }
        .page-form-certificate{
            padding: 24rpx 30rpx;
            border-bottom: 1rpx solid #E5E5E5;
            .certificate-head{
                padding: 14rpx 0;
                @include flex(flex-start);
                flex-direction: row;
                .title{
                    height: 45rpx;
                    line-height: 45rpx;
                    font-size: 32rpx;
                }
                .example{
                    margin-left: auto;
                    font-size: 32rpx;
                    height: 45rpx;
                    line-height: 45rpx;
                    color: #0A5FEC;
                }
            }
            .certificate-content{
                border: 1rpx dashed #0A5FEC;
                border-radius: 8rpx;
                @include flex();
                flex-direction: column;
                overflow: hidden;
                .btn{
                    padding: 72rpx 0;
                    @include flex();
                    flex-direction: column;
                    img{
                        width: 124rpx;
                        height: 124rpx;
                        margin-bottom: 20rpx;
                    }
                    text{
                        color: #666666;
                        font-size: 32rpx;
                        height: 45rpx;
                        line-height: 45rpx;
                    }
                }
            }
        }
    }
    .page-btn{
        margin-top: auto;
        padding: 60rpx 30rpx;
        width: calc(100vw - 60rpx);
        button{
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            color: #FFFFFF;
            font-size: 34rpx;
            background: #3782FF;
            border-radius: 44rpx;
        }
    }
</style>